<template>
  <div class="wrap">
    <a-row type="flex" class="box1">
      <a-col :span="24" class="box1-l">
        <a-col :span="3">
          <img :src="msg.icon" alt />
        </a-col>
        <a-col :span="14">
          <div class="box-data">
            <div class="bd-one">
              <div class="bo-name">
                {{msg.name}}
              </div>
              <div class="bo-credit">
                <div class="bc-buy">
                  <div>买家信誉：</div>
                  <div v-if="msg.buyer_sum == 0">
                    <div class="bti-wrap" >
                      <div class="bt-img">
                        <img src="~/static/x0.png"/>
                      </div>
                    </div>
                  </div>
                  <div v-else>
                    <div class="bti-wrap" v-if="msg.buyer_grane == 'xingxing'">
                      <div v-for="(itemx,indexx) in msg.buyer_sum" :key="indexx" class="bt-img">
                        <img src="~/static/a_Star.png"/>
                      </div>
                    </div>
                    <div class="bti-wrap" v-if="msg.buyer_grane == 'taiyang'">
                      <div v-for="(itemt,indext) in msg.buyer_sum" :key="indext" class="bt-img">
                        <img src="~/static/a_Diamond.png"/>
                      </div>
                    </div>
                    <div class="bti-wrap" v-if="msg.buyer_grane == 'huangguan'">
                      <div v-for="(itemh,indexh) in msg.buyer_sum" :key="indexh" class="bt-img">
                        <img src="~/static/a_Crown.png"/>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="bc-buy">
                  <div>卖家信誉：</div>
                  <div v-if="msg.seller_sum == 0">
                    <div class="bti-wrap" >
                      <div class="bt-img">
                        <img src="~/static/x0.png"/>
                      </div>
                    </div>
                  </div>
                  <div v-else>
                    <div class="bti-wrap" v-if="msg.seller_grane == 'xingxing'">
                      <div v-for="(itemx,indexx) in msg.seller_sum" :key="indexx" class="bt-img">
                        <img src="~/static/b_Star.png"/>
                      </div>
                    </div>
                    <div class="bti-wrap" v-if="msg.seller_grane == 'taiyang'">
                      <div v-for="(itemt,indext) in msg.seller_sum" :key="indext" class="bt-img">
                        <img src="~/static/b_Diamond.png"/>
                      </div>
                    </div>
                    <div class="bti-wrap" v-if="msg.seller_grane == 'huangguan'">
                      <div v-for="(itemh,indexh) in msg.seller_sum" :key="indexh" class="bt-img">
                        <img src="~/static/b_Crown.png"/>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="bd-two">
              <a-button type="primary" @click="onJump('mine-info')">查看资料</a-button>
              <a-button type="primary" @click="onJump('mine-credit')">信用规则</a-button>
              <a-button type="primary" v-if="msg.user_id">支付宝登录已授权</a-button>
              <a-button type="danger" @click="handleZfb" v-else>支付宝登录未授权</a-button>
            </div>
          </div>
        </a-col>
      </a-col>
    </a-row>
    <a-row class="box2">
      <a-row type="flex" justify="space-between" class="box2-t">
        <a-col :span="3">我是买家</a-col>
        <a-col :span="3" class="gd" @click="onJump('mine-buylist')">查看全部 ></a-col>
      </a-row>
      <a-row type="flex" justify="space-between" class="box2-b">
        <a-col class="btn" :span="6" @click="onJump('mine-buylist','1')">交易中</a-col>
        <a-col class="btn" :span="6" @click="onJump('mine-buylist','3')">交易完成</a-col>
        <a-col class="btn" :span="6" @click="onJump('mine-buylist','0')">已关闭</a-col>
        <a-col class="btn" :span="6" @click="onJump('mine-buylist','2')">售后</a-col>
      </a-row>
    </a-row>
    <a-row class="box2">
      <a-row type="flex" justify="space-between" class="box2-t" style="background:none;">
        <a-col :span="3">我是卖家</a-col>
        <a-col :span="3"></a-col>
      </a-row>

      <a-row>
        <a-col :span="8">
          <a-row
            type="flex"
            justify="space-between"
            class="box2-t f14"
            style="border-right:1px solid #e8e8e8;"
          >
            <a-col :span="12" class="f14">我发布的</a-col>
            <a-col :span="12" class="gd" @click="onJump('mine-release')">查看全部 ></a-col>
          </a-row>
        </a-col>
        <a-col :span="16">
          <a-row type="flex" justify="space-between" class="box2-t f14">
            <a-col :span="12" class="f14">我卖出的</a-col>
            <a-col :span="12" class="gd" @click="onJump('mine-sell')">查看全部 ></a-col>
          </a-row>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="8">
          <a-row
            type="flex"
            justify="space-between"
            class="box2-b"
            style="border-right:1px solid #e8e8e8;"
          >
            <a-col class="btn" :span="8" @click="onJump('mine-release','2')">出售中</a-col>
            <a-col class="btn" :span="8" @click="onJump('mine-release','1')">上架</a-col>
            <a-col class="btn" :span="8" @click="onJump('mine-release','0')">下架</a-col>
          </a-row>
        </a-col>
        <a-col :span="16">
          <a-row type="flex" justify="space-between" class="box2-b">
            <a-col class="btn" :span="6" @click="onJump('mine-sell','1')">交易中</a-col>
            <a-col class="btn" :span="6" @click="onJump('mine-sell','3')">交易完成</a-col>
            <a-col class="btn" :span="6" @click="onJump('mine-sell','0')">已关闭</a-col>
            <a-col class="btn" :span="6" @click="onJump('mine-sell','2')">售后</a-col>
          </a-row>
        </a-col>
      </a-row>
    </a-row>
  </div>
</template>

<script>
import { MY_INFO, GET_INFO } from "./server";
export default {
  layout: "main",
  data() {
    return {
      msg: {}
    };
  },
  created() {
    MY_INFO().then(res => {
      if (!res) return;
      this.msg = res.data;
    });
  },
  methods: {
    onJump(name, id) {
      this.$router.push({ name, params: { tid: id } });
    },
    handleZfb() {
      GET_INFO().then(res => {
        window.location.href= res.data
      })
    }
  }
};
</script>
<style lang="less" scoped>
.wrap {
  border: 3px solid #0084ff;
  border-radius: 6px;
}
.box1 {
  // height: 132px;
  // border: 3px solid #0084ff;
  // border-radius: 6px;
  .box1-l {
    // height: 130px;
    min-height: 130px;
    padding: 20px;
    background: #f6f6f6;
    border-right: 1px solid #e8e8e8;
    // line-height: 132px;
    img {
      width: 90px;
      height: 90px;
      border-radius: 50%;
      margin: 0 12px;
    }
    .box-data {
      .bd-one {
        // padding-bottom: 20px;
        .bo-name {
          margin-bottom: 5px;
        }
        .bo-credit {
          display: flex;
          align-items: center;
          .bc-buy {
            display: flex;
            align-items: center;
            margin-right: 5px;
            .bti-wrap {
              display: flex;
              .bt-img {
                display: flex;
                width: 16px;
                height: 16px;
                img {
                  margin: 0;
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }
      .bd-two {
        padding-top: 10px;
      }
    }
  }
  .box1-r1 {
    height: 64px;
    border-bottom: 1px solid #e8e8e8;
    & > div {
      padding: 12px 20px;
    }
  }
  .box1-r2 {
    height: 64px;
    border-right: 1px solid #e8e8e8;
    &:last-child {
      border: 0;
    }
    & > div {
      padding: 12px 20px;
    }
  }
  .f18 {
    font-size: 18px;
  }
}
.box2 {
  margin-top: 20px;
  // border: 3px solid #0084ff;;
  // border-radius: 6px;
  .f14 {
    font-size: 14px !important;
  }
  .gd {
    font-size: 12px !important;
    color: #8fa1ac;
    cursor: pointer;
  }
  .box2-t {
    height: 42px;
    line-height: 42px;
    background: #f6f6f6;
    border-bottom: 1px solid #e8e8e8;
    div:first-child {
      font-size: 16px;
      padding-left: 24px;
    }
    div:last-child {
      text-align: right;
      padding-right: 16px;
    }
  }
  .box2-b {
    height: 60px;
    line-height: 60px;
    text-align: center;
    div {
      font-size: 12px;
      cursor: pointer;
    }
  }
  .sc {
    padding: 0 10px;
    margin-top: 10px;
    img {
      width: 216px;
      height: 216px;
    }
    div:nth-child(2) {
      width: 100%;
      height: 40px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }
    div:nth-child(3) {
      color: #0084ff;
    }
  }
}
.btn {
  color: #0084ff;
}
</style>